<script>
import axios from "axios";

export default {
    name: "Detail",
    data(){
        return {
            info:{},
            isLoading:true
        }
    },
    beforeRouteUpdate(to,from,next){
          this.getFilmInfo(to.params.id);
          next();
    },
    methods:{
        async getFilmInfo(filmId=this.$route.params.id){
            this.isLoading = true;
            const {data} = await axios.get("https://m.maizuo.com/gateway",{
                params:{
                    filmId
                },
                headers:{
                    "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.1","e":"1762673692770985284337665","bc":"110100"}',
                    "X-Host": "mall.film-ticket.film.info"
                }
            });
            this.isLoading = false;
            this.info = data.data.film;
        }
    },
    mounted() {
        this.getFilmInfo();
    }
}
</script>

<template>
<div>
    <h3 v-if="isLoading">正在加载中……</h3>
    <template v-else>
        <h3>{{info.name}}</h3>
        <p>{{info.synopsis}}</p>
    </template>

</div>
</template>

<style scoped>

</style>